<template>
  <div class="inventory-count-add-all">
    <div class="info">
      <div>
        <div class="left">
          <p class="creater mr40">制单人：{{ userInfo.createBy || "-" }}</p>
          <p class="mr40">制单时间：{{ userInfo.createTime || "-" }}</p>
          <p>单据编号：{{ userInfo.deliveryNo || "-" }}</p>
        </div>
        <div class="right">
          <el-button type="info" plain @click="$router.push({ path: '/procure/inventory-count', query: {} })">返回</el-button>
        </div>
      </div>
    </div>

    <el-container class="content">
      <el-aside>
        <div class="count">
          <h3>合计</h3>
          <div style="display: flex">
            <p class="mr100">账面库存数量：{{ COUNT.zNum1 }}</p>
            <p>账面库存件数：{{ COUNT.zNum2 }}</p>
          </div>
        </div>

        <!-- 商品列表 -->
        <div class="products-list" style="overflow-x: auto">
          <div class="my-table" style="min-width: 1300px">
            <div class="table-header">
              <div>
                <div>
                  <div class="col1">商品信息</div>
                  <div class="col2">商品分类</div>
                  <div class="col3">关联客户</div>
                  <div class="col4">单位</div>
                  <div class="col5">账面库存数量</div>
                  <div class="col6">账面库存件数</div>
                  <div class="col7">仓库</div>
                  <div class="col3">采购金额</div>
                </div>
              </div>
            </div>

            <div class="table-body" v-if="list.length > 0">
              <div class="list-item" v-for="(item, index) in list" :key="index">
                <div>
                  <div class="col1">
                    <div>
                      <div class="left">
                        <img :src="item.mainPicUrl" alt="" />
                      </div>
                      <div class="right">
                        <h3 class="name text-break">{{ item.productAliasName || "-" }}</h3>
                        <p style="white-space: break-spaces; word-break: break-all">
                          <!-- {{ getSpes(item.properties) }} -->
                          {{ item.skuSpecification }}
                        </p>
                        <p>SKU编码：{{ item.skuCode || "-" }}</p>
                        <p>ID：{{ item.productId || "-" }}</p>
                      </div>
                    </div>
                  </div>
                  <div class="col2">
                    {{ item.category || "-" }}
                  </div>
                  <div class="col3" style="white-space: break-spaces; word-break: break-all">
                    {{ item.customer ? item.customer.split(",")[0] + " " + item.customer.split(",")[1] : "-" }}
                  </div>
                  <div class="col4">
                    {{ getName(item.productUnit) || "-" }}
                  </div>
                  <div class="col5">
                    {{ item.curProductNum || "-" }}
                    <!-- <el-input-number
                    :min="1"
                    :max="item.availuableNum || 1"
                    :precision="0"
                    controls-position="right"
                    style="width: 100px"
                    v-model="item.deliveryQuantity"
                    @change="
                      () => {
                        // item.deliveryPartQuantity =
                        //   (Number(item.availuablePartNum) / Number(item.availuableNum)) * Number(item.deliveryQuantity) || 0;
                      }
                    "
                  ></el-input-number> -->
                  </div>
                  <div class="col6">
                    {{ item.curProductPartNum || "-" }}
                    <!-- <el-input-number
                    :min="0"
                    :max="item.availuablePartNum || 0"
                    :precision="0"
                    controls-position="right"
                    style="width: 100px"
                    v-model="item.deliveryPartQuantity"
                  ></el-input-number> -->
                  </div>
                  <div class="col7">{{ item.warehouseName || "-" }}</div>
                  <div class="col3">{{ item.buyPrice || "-" }}</div>
                </div>
                <div class="tips">
                  <p class="label">备注</p>
                  <!-- <el-input maxlength="200" v-model="item.checkRemark" placeholder="请输入"></el-input> -->
                  <RemarkEditor v-model="item.checkRemark" />
                </div>
              </div>
            </div>
            <div v-else style="display: flex; justify-content: center; width: 100%">
              <el-empty description="暂无数据" />
            </div>
          </div>
        </div>
      </el-aside>
      <el-main width="300px">
        <div class="pd-info mb20">
          <p style="color: #86909c">盘点标题</p>
          <el-input v-model="receivingName" placeholder="请输入" style="width: 100%" />
        </div>
        <div class="pd-info mb20">
          <p style="color: #86909c">盘点仓库</p>
          <el-select v-model="houseValue" placeholder="请选择" clearable @change="changeHouse">
            <el-option v-for="item in storeList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId" />
          </el-select>
        </div>
        <div class="pd-info mb20">
          <p style="color: #86909c">盘点类型</p>
          <span>整仓盘点</span>
        </div>
        <el-divider />
        <!-- 附件 -->
        <div class="file">
          <p class="label">附件</p>
          <div style="width: 100%">
            <!-- 上传图片 -->
            <el-upload
              class="upload-demo upload-card"
              v-model:file-list="imgFileList"
              ref="uploadImg"
              :show-file-list="true"
              multiple
              :limit="10"
              list-type="text"
              :auto-upload="false"
              :on-change="
                (file, fileList) => {
                  handleAvatarChangeIcon(file, fileList);
                }
              "
              :on-preview="
                file => {
                  reviewFile(file);
                }
              "
            >
              <template #trigger>
                <el-button :disabled="FileList.length >= 10">
                  <el-icon class="f24"><Plus /></el-icon>
                </el-button>
              </template>
              <template #tip>
                <p class="f12 mt10" style="color: #86909c">支持doc/docx/pdf/jpg/png，最多上传10个。</p>
              </template>
            </el-upload>
          </div>
        </div>

        <!-- 盘点备注 -->
        <div class="ck-tips mt20">
          <p class="label">盘点备注</p>
          <!-- <el-input maxlength="200" v-model="textarea" :rows="10" type="textarea" placeholder="请输入" /> -->
          <RemarkEditor v-model="textarea" />
        </div>
      </el-main>
    </el-container>

    <!-- 操作按钮栏 -->
    <div class="action-wrap">
      <!-- 分页 -->
      <div>
        <!-- <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="pagination.sizes"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        /> -->
      </div>

      <!-- <el-button type="info" plain>取消</el-button> -->
      <el-button type="primary" :disabled="!(list.length > 0 && imgIsReady)" @click="submit">创建盘点单</el-button>
    </div>

    <!-- 确认暂存的list会清空 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpenClear"
      :message="'您正在重新选择出库仓，当前商品信息将被重置，重新添加商品，请问是否继续当前操作？'"
      :submitBtnText="'继续前往'"
      @submit="returnSubmitClear"
    />

    <!-- 图片文件预览 -->
    <el-dialog v-model="dialogVisibleImg" title="图片文件预览" width="500">
      <img :src="reviewImgUrl" alt="" style="width: 100%" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisibleImg = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted, watch } from "vue";
import SearchForm from "@/components/SearchForm";
import { Search, RefreshRight } from "@element-plus/icons-vue";
import { getSuppliers } from "@/apis/products/specifications";
import moment from "moment";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import { getTempProductSkuList, newInboundOrder, delTempProductSku } from "@/apis/procure/entry";
import { ListPage } from "@/apis/procure/warehouse";
import { ElMessage, ElMessageBox } from "element-plus";
import useCodeArrStore from "@/store/modules/select";
import ActionSubmitDialog from "@/components/ActionSubmitDialog";
import china from "@/utils/china.json";
import {
  createOtherDeliveryOrderInfo,
  getTempProductSkuListDelivery,
  delTempProductSkuDelivery,
  crateOtherDeliveryOrder
} from "@/apis/procure/outbound";
import { searchDetail, deleteTempSku, save } from "@/apis/procure/inventory-count";
import { _throttle } from "@/utils";
import RemarkEditor from "@/components/RemarkEditor";

const storeList = ref([]); //收货仓库下拉数据
const houseValue = ref(route.query.warehouseId); //选中的出库仓
const list = ref([]);
const pagination = ref({
  page: 1,
  size: 10,
  sizes: [10, 20, 30, 40, 50],
  total: 0
});
const receivingName = ref(route.query.receivingName);
const textarea = ref("");
const userInfo = ref({});
const _isOpenClear = ref(false);
const psList = ref([{ label: "配送人A", value: 1 }]); //配送人员下拉数据
const psValue = ref(null); //选中的配送人员
const form = ref({}); //收货信息表单数据
const formRef = ref();
const form2 = ref({}); //新建配送人表单数据
const form2Ref = ref();
const mapList = ref(china);
const dialogVisible = ref(false);
const COUNT = ref({ zNum1: 0, zNum2: 0 });
const dialogVisibleImg = ref(false);
const reviewImgUrl = ref("");

watch(
  () => list.value,
  val => {
    COUNT.value = { zNum1: 0, zNum2: 0 };
    for (let item of val) {
      COUNT.value.zNum1 += Number(item.curProductNum);
      COUNT.value.zNum2 += Number(item.curProductPartNum);
    }
  },
  { deep: true }
);
watch(
  () => route.query.warehouseId,
  val => {
    if (val) {
      getList();
    }
  },
  { deep: true }
);

onMounted(async () => {
  const info = await createOtherDeliveryOrderInfo({ type: 5 });
  userInfo.value = info.data;

  const res2 = await ListPage({ page: 1, size: 9999 }); //出库仓
  storeList.value = res2.data.records;

  // const res = await getSuppliers();
  // houseList.value = res.data;
  // userInfo.value = {
  //   name: JSON.parse(localStorage.getItem("userinfo")).tenantName,
  //   time: moment().format("YYYY/MM/DD HH:mm:ss")
  // };

  if (route.query.warehouseId) houseValue.value = route.query.warehouseId;

  getList();
});

const reviewFile = file => {
  const fileArr = ["doc", "docx", "pdf"];
  const fileSuffix = file.name?.split(".")[file.name?.split(".").length - 1] || "";
  const type = fileArr.includes(fileSuffix.toLowerCase()) ? "file" : "img";
  console.log("这个文件是==", type);
  if (type === "file") {
    // 文件下载
    downloadFile(file.fileUrl || "");
  } else if (type === "img") {
    // 图片预览
    reviewImgUrl.value = file.fileUrl;
    dialogVisibleImg.value = true;
  }
};

/**
 * 下载附件
 */
const downloadFile = url => {
  console.log("这是下载附件操作", url);
  if (!url) return;
  const urlSplit = url ? url.split("/") : [];
  const name = decodeURIComponent(urlSplit[urlSplit.length - 1]);
  let xhr = new XMLHttpRequest();
  xhr.open("get", url, true);
  xhr.responseType = "blob";
  xhr.onload = function (e) {
    if (xhr.status === 200) {
      let file = xhr.response;
      let fileName = name;
      if ("msSaveOrOpenBlob" in navigator) {
        window.navigator.msSaveOrOpenBlob(file, fileName);
      } else {
        let fileUrl = window.URL.createObjectURL(file);
        let a = document.createElement("a");
        a.download = fileName;
        a.href = fileUrl;
        document.getElementsByTagName("body")[0].appendChild(a);
        a.click();
        a.parentNode.removeChild(a);
        window.URL.revokeObjectURL(fileUrl);
      }
    }
  };
  xhr.send();
};
const changeHouse = () => {
  router.push({
    path: "/procure/inventory-count/add-all",
    query: { ...route.query, warehouseId: houseValue.value }
  });
};

//打开新建配送人弹窗
const openAdd = () => {
  dialogVisible.value = true;
};
//关闭新建配送人弹窗
const closeAdd = () => {
  form2Ref.value.resetFields();
  dialogVisible.value = false;
};

//确认新建配送人
const addSubmit = () => {
  form2Ref.value.validate((valid, fields) => {
    if (valid) {
      closeAdd();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const cascaderRef = ref();
const handleChange = value => {
  console.log("producerList", value);
  const nodes = cascaderRef.value.getCheckedNodes();
  console.log("找到了当前选中的节点数据===", nodes);
  form.value.provinceId = nodes[0].pathValues[0];
  form.value.cityId = nodes[0].pathValues[1];
  form.value.districtId = nodes[0].pathValues[2];
  form.value.provinceName = nodes[0].pathLabels[0];
  form.value.cityName = nodes[0].pathLabels[1];
  form.value.districtName = nodes[0].pathLabels[2];
};

const toPath = () => {
  if (route.query._time && houseValue.value === route.query.warehouseId) {
    router.push({
      path: "/procure/inventory-count/select-prod",
      query: { receivingName: receivingName.value, warehouseId: houseValue.value, _time: route.query._time }
    });
  } else {
    _isOpenClear.value = true;
  }
};
const returnSubmitClear = () => {
  router.push({
    path: "/procure/inventory-count/select-prod",
    query: { receivingName: receivingName.value, warehouseId: houseValue.value, _time: new Date().getTime() }
  });
};

const clickDel = row => {
  deleteTempSku({
    tempId: route.query._time,
    businessSkuId: row.businessSkuId,
    orderId: row.orderId
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "移除成功！",
        type: "success"
      });
      getList();
    }
  });
  // console.log("删除暂存数据", row);
};

const getName = code => {
  return useCodeArrStore().getDictName("shop_unit", code);
};

//确认创建出库单
const submit = _throttle(() => {
  if (!houseValue.value) {
    return ElMessage({
      message: "请选择盘点仓库",
      type: "error"
    });
  }
  // console.log(1111, FileList.value);
  save({
    checkCode: userInfo.value.deliveryNo,
    createTime: userInfo.value.createTime,
    checkTitle: receivingName.value,
    checkType: 1, //盘点类型;1整仓盘点 2sku盘点
    warehouseId: houseValue.value,
    remark: textarea.value,
    picIds: String(FileList.value.map(item => item.uid)),
    picUrls: String(FileList.value.map(item => item.fileUrl)),
    inventoryCheckDetails: list.value
  }).then(res => {
    if (res.code === 200) {
      ElMessageBox.confirm("", "", {
        cancelButtonText: "取消",
        confirmButtonText: "前往查看",
        dangerouslyUseHTMLString: true,
        message: "<div class='img'></div><p>整仓盘点单已创建成功，将返回到盘点管理列表，可前往盘点单录入查看！</p>",
        customClass: "my-success-messagebox",
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false
      })
        .then(() => {
          console.log("前往出库列表查看");
          router.push({ path: "/procure/inventory-count" });
        })
        .catch(async () => {
          // 取消

          const info = await createOtherDeliveryOrderInfo({ type: 5 });
          userInfo.value = info.data;

          getList();
        });
    }
  });
}, 1000);

//查询列表数据
const getList = () => {
  searchDetail({
    page: pagination.value.page,
    size: 9999,
    // size: pagination.value.size,
    checkType: 1, //盘点类型;1整仓盘点 2sku盘点
    warehouseId: route.query.warehouseId
  }).then(res => {
    if (res.code === 200) {
      list.value = res.data.records || [];
      pagination.value.total = res.data.total;
    }
  });
};

const handleSizeChange = val => {
  pagination.value.size = val;
  getList();
};
const handleCurrentChange = val => {
  pagination.value.page = val;
  getList();
};

//拼接商品的sku规格
const getSpes = properties => {
  if (!properties) return "-";
  const arr = JSON.parse(properties) || [];
  if (arr.length > 1) {
    const str = arr.reduce((a, b) => {
      return a.specificationVal + "+" + b.specificationVal;
    });
    return str;
  } else if (arr.length === 1) {
    return arr[0].specificationVal;
  } else {
    return "-";
  }
};

//====================================图片上传========================================================================================
import useMultipartOssStore from "@/store/modules/multipartOssStore.js";
const ossStore = useMultipartOssStore();
import {
  getFolder,
  _debounce //防抖，多次频繁触发时，只执行最后一次
} from "@/utils/index";
import { imgsUpload } from "@/apis/products/specifications";
const FileList = ref([]); //商品图片list
const uploadImg = ref();
const imgFileList = ref([]); //编辑时商品图片list
const imgIsReady = ref(true);
const handleAvatarChangeIcon = _debounce(async (file, fileList, type = "img-word") => {
  //选中文件触发的change事件
  console.log("触发文件上传==", fileList);
  let _fileList = fileList.filter(item => item.status === "ready"); //未上传成功的图片
  const flag = await fileType(type, type === "img-word" ? _fileList : [file]);
  if (!flag) {
    if (type === "img-word") {
      ElMessage({
        message: "支持扩展名：doc/docx/pdf/jpg",
        type: "error",
        offset: 60
      });
      const errorFile = _fileList.filter(
        item =>
          !(
            item.raw.type === "image/jpeg" ||
            item.raw.type === "image/png" ||
            item.raw.type === "application/msword" ||
            item.raw.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
            item.raw.type === "application/pdf"
          )
      );
      for (let item of errorFile) {
        uploadImg.value.handleRemove(item);
      }
    }
    return;
  }
  if (type === "img-word") {
    FileList.value = fileList;
    imgIsReady.value = false;
    for (let item of _fileList) {
      await customUpload(item, { file: item }, type);
    }
    imgIsReady.value = true;
  }
}, 100);
/**
 * 校验文件类型
 */
const fileType = async (type, fileList) => {
  let flag = true;
  if (type === "img") {
    for (let item of fileList) {
      if (!(item.raw.type === "image/jpeg" || item.raw.type === "image/png")) {
        flag = false;
      }
    }
  } else if (type === "img-word") {
    for (let item of fileList) {
      if (
        !(
          item.raw.type === "image/jpeg" ||
          item.raw.type === "image/png" ||
          item.raw.type === "application/msword" ||
          item.raw.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
          item.raw.type === "application/pdf"
        )
      ) {
        flag = false;
      }
    }
  }
  return flag;
};
/**
 * 上传
 */
const getFileName = name => {
  const arr = name.split(".");
  const _arr = JSON.parse(JSON.stringify(arr));
  let _name = "";
  let _suffix = "";
  if (arr.length > 2) {
    _arr.splice(_arr.length - 1, 1);
    _name = _arr.join(".");
    _suffix = arr[arr.length - 1];
  } else {
    _name = arr[0];
    _suffix = arr[1];
  }
  const folder = getFolder();
  return folder + _name + new Date().getTime() + "." + _suffix;
};
const customUpload = async (item, option, type) => {
  // 合并已上传和当前上传文件
  const objName = getFileName(option.file.name);
  await ossStore
    .submit(objName, option.file.raw)
    .then(async res => {
      await ossStore.setACL(objName, fileReadRole.publicRead);
      res.fileUrl = await ossStore.signatureUrl(objName);
      console.log("文件上传成功，地址为===", res.fileUrl.split("?")[0]);
      if (type === "img-word") {
        item["fileUrl"] = res.fileUrl.split("?")[0];
      }
      item["folder"] = objName;

      const Option = JSON.parse(JSON.stringify(option));
      uploadIMG(Option); //图片上传到业务端
    })
    .catch(err => {
      alert(JSON.stringify(err));
    });
};

//将图片上传到业务端服务
const uploadIMG = option => {
  const nameArr = option.file.name.split(".");
  const uploadArr = [
    {
      fileId: option.file.uid,
      objectName: option.file.folder, //目录＋文件名称
      url: option.file.img || option.file.video,
      access: "public-read",
      fileName: option.file.name, //文件名称
      bucketName: "51-jzt-dev",
      size: option.file.size,
      type: true,
      suffix: nameArr[nameArr.length - 1]
    }
  ];
  imgsUpload(uploadArr).then(res => {
    console.log(909090, res);
  });
};
const fileReadRole = {
  defaultRole: "",
  privateRole: "private",
  publicRead: "public-read",
  publicReadWrite: "public-read-write"
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.inventory-count-add-all {
  height: calc(100% - 64px);
  overflow-y: auto;
  padding: 0 20px 64px 20px;
  position: relative;

  .search-wrap {
    padding: 20px;
    overflow-x: hidden;
    background-color: #f6f8fa;
  }

  .info {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 22;
    & > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid #e2e8f0;
    }
    & > div > div {
      display: flex;
    }
    .left {
      .creater {
        color: #1a1a1a;
        font-weight: bold;
      }
    }
  }
  .content {
    height: calc(100% - 75px);
    :deep(.el-aside) {
      flex: 1;
      padding: 20px 20px 20px 0;
      header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px;
        .supper {
          flex: 1;
          display: flex;
          align-items: center;
          padding-right: 20px;
          p {
            width: 65px;
          }
          .el-select {
            flex: 1;
          }
        }
      }
      .count {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        background-color: #f6f8fa;
        margin-bottom: 20px;
        h3 {
          font-size: 16px;
          font-weight: normal;
        }
      }
      .products-list {
        .table-header {
          background-color: #f2f6fc;
          margin-bottom: 10px;
        }
        .table-body {
          .list-item {
            margin-bottom: 10px;
            & > div {
              border: 1px solid #e1e6ed;
              display: flex;
              // align-items: center;
              &:not(:first-of-type) {
                border-left: none;
              }
              &:not(:last-of-type) {
                & > div:not(:last-of-type) {
                  border-right: 1px solid #e1e6ed;
                }
              }
              & > div {
                display: flex;
                align-items: center;
              }
            }
            .col1 {
              & > div {
                display: flex;
              }

              .left {
                img {
                  width: 80px;
                  height: 80px;
                  border-radius: 4px;
                }
              }
              .right {
                padding-left: 18px;
                .name {
                  font-size: 14px;
                  color: #3d3d3d;
                  margin-bottom: 5px;
                }
                p {
                  font-size: 12px;
                  color: #86909c;
                  margin-bottom: 5px;
                }
              }
            }
            .tips {
              display: flex;
              padding: 16px 14px;
              border-top: none;
              border-left: 1px solid #e1e6ed !important;
              p.label {
                width: 38px;
              }
              .el-input {
                flex: 1;
                .el-input__wrapper {
                  background-color: #f2f3f5;
                }
              }
            }
          }
        }
        .table-header,
        .table-body {
          & > div > div:first-of-type {
            display: flex;
            justify-content: space-between;
            & > div {
              padding: 14px 20px;
              &.col1 {
                // width: 45%;
                flex: 1;
                min-width: 400px;
              }
              &.col4,
              &.col8 {
                width: 80px;
                box-sizing: border-box;
              }
              &.col3 {
                width: 80px;
              }
              &.col7 {
                width: 100px;
                box-sizing: border-box;
              }
              &.col5,
              &.col2,
              &.col6 {
                width: 125px;
                box-sizing: border-box;
              }
            }
          }
        }
      }
    }
    :deep(.el-main) {
      width: 300px;
      flex: none;
      background-color: #f6f8fa;
      border-left: 1px solid #e2e8f0;
      .pd-info,
      .ps-people {
        p {
          width: 120px;
          margin-bottom: 10px;
        }
        .el-select {
          flex: 1;
        }
      }
      .ps-people {
        & > div {
          display: flex;
          .el-button {
            font-size: 12px;
          }
        }
      }
      .kh-info {
        h3 {
          color: #86909c;
          font-weight: normal;
          margin: 20px 0 16px 0;
        }
        p {
          color: #86909c;
          margin-bottom: 10px;
        }
        b {
          font-weight: normal;
          color: #1a1a1a;
        }
      }
      .sh-info {
        & > p {
          font-size: 16px;
          color: #86909c;
          margin-bottom: 10px;
        }
        .el-form-item {
          flex-direction: column;
        }
        .el-form-item__label-wrap {
          margin-left: 0 !important;
        }
      }
      .ck-tips,
      .file {
        p.label {
          color: #4e5969;
          margin-bottom: 10px;
        }
      }

      .el-upload.el-upload--text {
        width: 80px;
        height: 80px;
        background-color: white;
        border-radius: 4px;
        .el-button {
          width: 100%;
          height: 100%;
        }
      }
      .el-upload-list__item.is-ready {
        width: auto;
        height: auto;
      }
    }
  }
  .action-wrap {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 64px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
  }
}
</style>
